<template>
  <div class="app-container">
    <div class="post-detail">
      <h1>{{ product.title }}</h1>
      <div class="text item">
        <div class="post-item-info post-item-info-state">
          <span>状态:&nbsp;</span>
          <el-tag type="info" v-show="product.state === -1">已下架</el-tag>
          <el-tag type="primary" v-show="product.state === 1">正常</el-tag>
        </div>
        <div class="post-item-info post-item-info-name">
          <span>负责人:&nbsp;</span>
          <span>{{ product.name }}</span>
        </div>
        <div class="post-item-info post-item-info-time">
          <span>上架时间:&nbsp;</span>
          <span>{{ product.operateTime }}</span>
        </div>
      </div>
      <h3>产品介绍</h3>
      <p>
      <dl v-html="product.content"></dl>
      </p>
      <h3>产品参数</h3>
      <el-descriptions class="margin-top item-condition" :column="3" border :labelStyle="{ width: '120px' }">

        <el-descriptions-item>
          <template slot="label">贷款金额</template>
          <span>{{ product.query.loanAmnt }}&nbsp;元</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">贷款分期</template>
          <span>{{ product.query.term }}&nbsp;期</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">贷款利率</template>
          <span>{{ product.query.interestRate }}&nbsp;%</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">分期付款金额</template>
          <span>{{ product.query.installment }}&nbsp;元</span>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import invitationApi from '@/api/lendingProduct'
import postItem from '@/components/postItem';
export default {
  components: {
    postItem
  },
  data() {
    return {
      role: this.$store.getters.roles,
      id: null,
      product: {
        query: {
          loanAmnt: 0,
          term: 0,
          interestRate: 0,
          installment: 0,
          employmentLength: 0,
          homeOwnership: 0,
          employmentLength: 0,
          homeOwnership: '0',
          annualIncome: 0
        },
      }
    }
  },
  watch: { // 监听
    $route(to, from) {
      if (this.$route.params && this.$route.params.id) {
        this.id = this.$route.params.id
        this.getInfo()
      } else {
        this.$router.push({ path: '/404' })
      }
    }
  },
  created() {
    this.historyPage = {
      hpage: 1,
      hlimit: 5,
      htotal: 0
    }
    if (this.$route.params && this.$route.params.id) {
      this.id = this.$route.params.id
      // 调用根据id查询课程的方法
      this.getInfo()
    } else {
      this.$router.push({ path: '/404' })
    }
  },
  methods: {
    getInfo() {
      invitationApi.getDetail(this.id)
        .then(response => {
          response.data.item.query = JSON.parse(response.data.item.extra);
          this.product = response.data.item
        })
    },
  }
}
</script>
<style lang="scss">
.post-detail {
  padding: 0 10%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .text.item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 10%;
  }

  dl {
    width: 100%;
    margin-top: 0;
    padding: 5%;
    background-color: #d9ecff;
  }
}
</style>
